<template>
    <section>
		<div id='detailList'>
			<el-tabs v-model="active" type="card" @tab-click="handleClick">
			    <el-tab-pane label="低价" name="0"><details0/></el-tab-pane>
			    <el-tab-pane label="假货" name="1"><details1/></el-tab-pane>
			    <el-tab-pane label="非授权商家" name="2"><details2/></el-tab-pane>
			</el-tabs>
		</div>
	</section>
</template>

<script>
	import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import { ACTIVE } from '../../store/mutation-types/warning/index.js'
    import { ACTIVE_H } from '../../store/mutation-types/warning/index.js'
    import { ACTIVE_FAKE } from '../../store/mutation-types/warning/index.js'
    import { ACTIVE_FAKE_H } from '../../store/mutation-types/warning/index.js'
    import { ACTIVE_RPT } from '../../store/mutation-types/warning/index.js'
    import { ACTIVE_RPT_H } from '../../store/mutation-types/warning/index.js'
    import {Button, Tabs, TabPane, TableColumn, Form, Table, FormItem, Option, Select, Input} from 'element-ui'
    import details0 from '~/components/warning/detail-warn/warnDetail0.vue'
    import details1 from '~/components/warning/detail-warn/warnDetail1.vue'
    import details2 from '~/components/warning/detail-warn/warnDetail2.vue'
    
    Vue.use(Tabs)
	Vue.use(Button)
	Vue.use(Select)
	Vue.use(Input)
	Vue.use(TabPane)
	Vue.use(Form)
	Vue.use(Option)
	Vue.use(FormItem)
	Vue.use(TableColumn)
	Vue.use(Table)
    export default {
        head(){
            
        },
        data() {
	      	return {
	      		today:'',
      	    	tab:'',
	      		active:'0'
	      	}
        },
        computed: {
	        ...mapGetters({
	            'pageTabsList': 'getPageTabsList',
//	            'active' : 'getDetailPrice'
	        })
        },
        mounted() {
	    	this.getURL()
	    	let url = window.location.href;
		    url = url.substring(url.lastIndexOf("="));
		    let getTab = url.charAt(1);
        	if(this.today==1){
        		if(getTab==0){
        			this.active=this.$store.state.warning.active;
		        	if(this.active == ''){
		        	  this.changeTabs()
		        	  this.active=this.$store.state.warning.active;
		        	}
        		}
        		if(getTab==1){
        			this.active=this.$store.state.warning.active00;
		        	if(this.active == ''){
		        	  this.changeTabs()
		        	  this.active=this.$store.state.warning.active00;
		        	}
        		}
        		if(getTab==2){
        			this.active=this.$store.state.warning.active2;
		        	if(this.active == ''){
		        	  this.changeTabs()
		        	  this.active=this.$store.state.warning.active2;
		        	}
        		}
	        	
        	}else{
        		if(getTab==0){
        			this.active=this.$store.state.warning.active1;
		        	if(this.active == ''){
		        	  this.changeTabs()
		        	  this.active=this.$store.state.warning.active1;
		        	}
        		}
        		if(getTab==1){
        			this.active=this.$store.state.warning.active11;
		        	if(this.active == ''){
		        	  this.changeTabs()
		        	  this.active=this.$store.state.warning.active11;
		        	}
        		}
        		if(getTab==2){
        			this.active=this.$store.state.warning.active22;
		        	if(this.active == ''){
		        	  this.changeTabs()
		        	  this.active=this.$store.state.warning.active22;
		        	}
        		}
        		
        	}	
		},
		watch:{
            $route(){
                setTimeout(()=>{
                	let url = window.location.href;
			        url = url.substring(url.lastIndexOf("="));
			        let getTab = url.charAt(1);
            		this.getURL()
                	if(this.today==1){
                		if(getTab==0){this.active=this.$store.state.warning.active;}
                		if(getTab==1){this.active=this.$store.state.warning.active00;}
                		if(getTab==2){this.active=this.$store.state.warning.active2;}
			        	
		        	}else{
		        		if(getTab==0) {this.active=this.$store.state.warning.active1;}
		        		if(getTab==1) {this.active=this.$store.state.warning.active11;}
		        		if(getTab==2) {this.active=this.$store.state.warning.active22;}
		        	}
                },10)
            }
		},
        methods: {
		  	handleClick (tab, event) {
		  		let url = window.location.href;
		        url = url.substring(url.lastIndexOf("="));
		        let getTab = url.charAt(1);
				if(this.today==1){
					if(getTab==0){this.$store.commit(ACTIVE, { active: tab.name})}
		  			if(getTab==1){this.$store.commit(ACTIVE_FAKE, { active00: tab.name})}
		  			if(getTab==2){this.$store.commit(ACTIVE_RPT, { active2: tab.name})}
		  		}else{
		  			if(getTab==0){this.$store.commit(ACTIVE_H, { active1: tab.name})}
		  			if(getTab==1){this.$store.commit(ACTIVE_FAKE_H, { active11: tab.name})}
		  			if(getTab==2){this.$store.commit(ACTIVE_RPT_H, { active22: tab.name})}
		  		}
    		},
    		changeTabs(){
    			let url = window.location.href;
		        url = url.substring(url.lastIndexOf("="));
		        let tab = url.charAt(1);
		        if(this.today==1){
		        	if(tab==1){
		        		this.$store.commit(ACTIVE_FAKE, { active00: '1'});
		        	}
		        	if(tab==2){
		        		this.$store.commit(ACTIVE_RPT, { active2: '2'});
		        	}
		        	if(tab==0){
		        		this.$store.commit(ACTIVE, { active: '0'});
		        	}
		        }else{
		        	if(tab==1){
		        		this.$store.commit(ACTIVE_FAKE_H, { active11: '1'});
		        	}
		        	if(tab==2){
		        		this.$store.commit(ACTIVE_RPT_H, { active22: '2'});
		        	}
		        	if(tab==0){
		        		this.$store.commit(ACTIVE_H, { active1: '0'});
		        	}
		        }
		    },
		    getURL(){
		    	let url = window.location.href;
		        url = url.substring(url.lastIndexOf("="));
		        this.tab = url.charAt(2);
		        if(this.tab==''){
		        	this.today=1
		        }else{
		        	this.today=0
		        }
		    }
	    },
		updated(){
        	
        },
        created () {
			
        },
        components: {
	        details0,
	        details1,
	        details2
	    }
    }
</script>

<style lang="scss">
	#detailList{
		.el-table__empty-block{width: 100% !important;}
		margin-top:20px;
		.el-tabs__content{display: block !important;}
		.el-tabs__nav-scroll{padding-left: 20px !important;}
	    .el-tabs__header{border-bottom: 1px solid rgba(217, 217, 217, 1)!important;padding-left: 20px !important;}
		
	}
</style>